<script>
import QuickLayout from '@/components/EmpsLayout/index.vue'
import MenuEdition from '@/views/system/menu/menu-edition.vue'

export default {
  name: 'SystemMenu',
  components: { MenuEdition, QuickLayout },
  data() {
    return {
      dataListUrl: '/sys/menu/list',
      deleteUrl: '/sys/menu'
    }
  },
  methods: {
    handleEdit(id, pid) {
      this.$refs.MenuEdit.init(id, pid)
    }
  }
}
</script>

<template>
  <quick-layout
    ref="RefMenu"
    row-key="id"
    :is-page="false"
    :is-page-helper="false"
    :is-operate-btn="true"
    :is-operate="true"
    :data-list-url="dataListUrl"
    :delete-url="deleteUrl"
    size="small"
    @edit="handleEdit"
    @created="handleEdit(null)"
  >
    <template>
      <el-table-column prop="name" label="名称" header-align="center" min-width="150" />
      <el-table-column prop="icon" label="图标" header-align="center" align="center">
        <template #default="scope">
          <svg-icon :icon="scope.row.icon" icon-class="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="type" label="类型" header-align="center" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.type === 0" type="info">菜单</el-tag>
          <el-tag v-if="scope.row.type === 1" type="success">按钮</el-tag>
          <el-tag v-if="scope.row.type === 2" type="warning">接口</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="openStyle" label="打开方式" header-align="center" align="center">
        <template #default="scope">
          <span v-if="scope.row.type !== 0" />
          <el-tag v-else-if="scope.row.openStyle === 0">内部打开</el-tag>
          <el-tag v-else type="info">外部打开</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" header-align="center" align="center" />
      <el-table-column prop="url" label="路由" header-align="center" align="center" width="150" />
      <el-table-column prop="authority" label="授权标识" header-align="center" align="center" width="150" />
    </template>

    <template #operateBtn="scope">
      <el-button v-if="scope.row.type === 0" size="mini" type="text" @click="handleEdit(null,scope.row.id)">新增</el-button>
    </template>

    <template v-slot:component>
      <menu-edition ref="MenuEdit" />
    </template>

  </quick-layout>
</template>

<style scoped lang="scss">

</style>

